import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, Button } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { getArticleById } from '../../api/ArticleDetailIndex';
import './ArticleDetail.css';

// 导入本地图片
import image1 from '../../assets/images/a1.jpg';
import image2 from '../../assets/images/a2.jpg';
import image3 from '../../assets/images/a3.jpg';
import image4 from '../../assets/images/a5.jpg';
import image5 from '../../assets/images/a4.jpg';
import image6 from '../../assets/images/a6.jpg';

// 图片映射
const imageMap = {
    1: image1,
    2: image2,
    3: image3,
    4: image4,
    5: image5,
    6: image6,
};

const { Meta } = Card;

const ArticleDetail = () => {
    const { id } = useParams();
    const navigate = useNavigate(); // 使用 useNavigate 进行导航
    const [article, setArticle] = useState(null);
    const [error, setError] = useState(null);

    useEffect(() => {
        if (id && !isNaN(id)) {
            getArticleById(id)
                .then(response => {
                    setArticle(response);
                })
                .catch(error => {
                    console.error('获取文章时出错!', error);
                    setError(error);
                });
        } else {
            setError(new Error('无效的文章ID'));
        }
    }, [id]);

    if (error) {
        return <div>加载文章时出错，请稍后再试。</div>;
    }

    if (!article) {
        return <div>加载中...</div>;
    }

    // 格式化内容以保留空格和换行
    const formattedContent = article.content
        .replace(/ /g, '&nbsp;')
        .replace(/\n/g, '<br />');

    // 根据文章ID选择对应的图片，使用默认图片作为后备
    const imageUrl = imageMap[id] || image1;

    // 返回按钮点击事件
    const handleReturn = () => {
        navigate('/home'); // 返回到首页
    };

    return (
        <div className="container">
            <Card
                hoverable
                className="card"
                cover={
                    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
                        {/* 返回按钮 */}
                        <Button
                            type="primary"
                            icon={<ArrowLeftOutlined />}
                            onClick={handleReturn}
                            style={{
                                position: 'absolute',
                                top: '10px',
                                left: '10px',
                                zIndex: 10,
                                background: 'rgba(207, 110, 30, 0.52)',
                            }}
                        >
                            返回首页
                        </Button>
                        {/* 图片 */}
                        <img
                            className="detail-img"
                            alt={article.title}
                            src={imageUrl}
                            style={{
                                width: '100%', // 图片宽度占满容器
                                height: "400px", // 图片高度占满容器
                                objectFit: 'cover', // 图片保持比例并覆盖容器
                            }}
                        />
                    </div>
                }
            >
                <h2 className="title">{article.title}</h2>
                <Meta
                    description={article.summary}
                />
                <div className="content" dangerouslySetInnerHTML={{ __html: formattedContent }} />
            </Card>
        </div>
    );
};

export default ArticleDetail;